<template>
	<t-modal title="字段详情" destroyOnClose :width="1000" :visible="visible" wrapClassName="t-popup-modal"
		@cancel="handleCancel">
		<a-card :bordered="false">
			<div class="page-common-sub-box">
				<s-table ref="table" size="small" :columns="columns" :data="loadData" rowKey="columnName"
					:pageSize="500" :rowClassName="rowClassName" :scroll="scrollXY" @rowClick="rowClick">
					<span slot="serial" slot-scope="text, record, index">
						{{ index + 1 }}
					</span>
				</s-table>
			</div>
		</a-card>
		<template slot="footer">
			<a-button key="back" @click="handleCancel">
				关闭
			</a-button>
		</template>
	</t-modal>
</template>

<script>
import {
	simpleListMixin
} from "@/mixins/simpleListMixin";
import {
	STable
} from "@/components";

const columns = [{
	title: "序号",
	width: 50,
	align: "center",
	scopedSlots: {
		customRender: "serial",
	},
},
{
	title: "字段名称",
	dataIndex: "columnName",
	align: "center",
},
{
	title: "字段注释",
	dataIndex: "remarks",
	align: "center",
},
{
	title: "字段类型",
	dataIndex: "typeName",
	align: "center",
}
];
export default {
	mixins: [simpleListMixin],
	components: {
		STable
	},
	props: {
		visible: {
			type: Boolean,
		},
	},
	data() {
		this.columns = columns;
		return {
			// 查询参数
			selectedRowKeys: [],
			selectedRows: [],
			rows: "", //选中行数据
			subHeight: 0,
			url: {
				getPageSet: "/system/sysDatabaseConnection/getColumn",
			},
			// 加载数据方法 必须为 Promise 对象
			loadData: (parameter) => {
				const requestParameters = Object.assign({}, parameter, this.queryParam);
				return this.$post(this.url.getPageSet, requestParameters).then(
					(res) => {
						return res;
					}
				);
			},
		};
	},
	computed: {
		scrollXY() {
			let subHeight = this.subHeight ? this.subHeight : 500
			let height = subHeight - 40 - 40
			return { y: height };
		},
	},
	filters: {
		sexFilter(sex) {
			const sexMap = {
				0: "女",
				1: "男",
			};
			return sexMap[sex];
		},
	},
	created() {
		this.$nextTick(() => {
			this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
		})
	},
	methods: {
		rowClick(e) {
			this.rows = e;
		},
		rowClassName(row) {
			return row.columnName === this.rows?.columnName ? "bg-bray" : ""; // 每条数据的唯一识别值
		},
		close() {
			this.$emit("close");
		},
		handleCancel() {
			this.close();
		},
	},
};
</script>

<style lang="less"></style>
